<template>
  <div class="home">
    <div style="background-color: white;padding: 20px;height: 60vh;">
      <input v-model="huoqu.query" class="sousuo" type="text" name="" id="">
      <span @click="sousuo" class="el-icon-search"></span>
      <span @click="add" class="add">添加用戶</span>
      <br> <br>
        <table class="box" cellspacing="0">
          <tr>
            <td style="width: 30px;"></td>
            <td>姓名</td>
            <td>邮箱</td>
            <td>电话</td>
            <td>角色</td>
            <td>状态</td>
            <td>操作</td>
          </tr>
          <tr v-for="x,i in sj.users" :key="i">
            <td >{{ i+1 }}</td>
            <td >{{ x.username }}</td>
            <td >{{ x.email }}</td>
            <td >{{ x.mobile }}</td>
            <td >{{ x.role_name }}</td>
            <td>
              <el-switch
                @click.native="zt(x,i)"
                v-model="x.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </td>
            <td style="width:220px;">
              <span @click="bj(x,i)" class="el-icon-edit bianji"></span>
              <span @click="dele(x)" class="el-icon-delete bianji"></span>
                <el-dialog v-if="bianji.id==x.id" :visible.sync="dialogFormVisible">
                  <el-form :model="bianji">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                      <el-input :disabled="true" v-model="x.username"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                      <el-input v-model="bianji.email"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                      <el-input v-model="bianji.mobile"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="bjcg">确 定</el-button>
                  </div>
                </el-dialog>
              <span @click="shezhi(x,i)" class="el-icon-setting bianji"></span>

              <!-- 设置角色 -->
              <el-dialog v-if="bianji.id==x.id" :visible.sync="dialogFormVisible1">
                  <el-form :model="bianji">
                    <el-form-item label="当前用户"  label-width="80px">
                      {{x.username}}
                    </el-form-item>
                    <el-form-item label="当前角色" label-width="80px">
                      {{x.role_name}}
                    </el-form-item>
                    <el-form-item label="设置角色" :label-width="formLabelWidth">
                      <el-select v-model="value" placeholder="请选择角色">
                        <el-option 
                        v-for="x in jslb" 
                        :key="x.id" :label="x.roleName" 
                        :value="x.id" @click.native="rid(x.roleName,x.id)"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="bjcg1">确 定</el-button>
                  </div>
                </el-dialog>

            </td>
          </tr>
        </table>
        <br>
        <span>共{{sj.total}}条</span> &nbsp;&nbsp;
        <span style="width:80px;border: 1px solid #c0c0c0;display: inline-block;text-align: center;height: 20px;margin-right: 30px;">2条/1页</span> 
        <button @click="jiann" class="jian">&lt;</button>
        <span @click="yeshu(x,i)" :style="pagen==x?'font-weight:bold;color:rgb(95, 154, 255);':''" v-for="x,i in num" :key="i" class="fy">{{ x }}</span>
        <button @click="jiaa" class="jia" style="margin-left: 30px;">></button>
    </div>
    <div :class="pd?'yc':'tanchuang'">
      用户：<input v-model="zh.username" type="text" class="zh" name="" > <br>
      密码：<input v-model="zh.password" type="password" class="mm" name="" ><br>
      <button style="background-color: #1f89f3;" class="tj" @click="tj">提交</button>
      <button style="background-color: #c0c0c0;" class="qx" @click="qx">取消</button>
    </div>
    <div  :class="pd?'yc':'zhezhao'">
      
    </div>
  </div>
</template>

<script>
import {huoqu,loginRequest,shanchu,bjyhrequest,yhzt,xgjsrequest} from '../../../request/api/users/user'
import {jsqx} from '../../../request/api/roles/jsqx'
export default {
  data(){
    return{
      huoqu:{
        pagenum:1,
        pagesize:2,
        query:''
      },
      bianji:{
        id:'',
        rid:'',
        mobile:'',
        email:'',
        roleName:''
      },
      zh:{
        username:'',
        password:''
      },
      sj:[],
      num:0,
      pagen:1,
      pd:true,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: '120px',
      jslb:{},
      ztxx:{
        uid:'',
        type:''
      },
      value:''
    } 
  },
  watch:{
    $route(to,from){
      console.log(this.$route.path);
    }
  },
  created(){
      huoqu(this.huoqu).then(res=>{
        console.log(res);
        this.sj=res.data.data
        this.num=Math.ceil(this.sj.total / 2)
      })
   
  },
  methods:{
    fb(){
        huoqu(this.huoqu).then(res=>{
          console.log(res);
          this.sj=res.data.data
          this.num=Math.ceil(this.sj.total / 2)
        })
    },
    dele(x){ 
      shanchu(x.id).then(res=>{
        if(res.data.meta.status==200){
          this.fb()
        }else{
          alert('删除失败')
        }
        
      })
    },
    yeshu(x,i){
      if(this.huoqu.pagenum!=x){
        this.pagen=x
        this.huoqu.pagenum=x
        console.log(this.pagenum);
          huoqu(this.huoqu).then(res=>{
          console.log(res);
          this.sj.users=res.data.data.users
          this.num=Math.ceil(this.sj.total / 2)
        })
      }
    },
    zt(x,i){
        this.ztxx.uid=x.id
        this.ztxx.type=x.mg_state
        console.log(this.ztxx.type);
        yhzt(this.ztxx).then(res=>{
          console.log(res);
        })
    },
    sousuo(){
      huoqu(this.huoqu).then(res=>{
        this.sj=res.data.data
        this.num=Math.ceil(this.sj.total / 2)
      })
    },
    jiaa(){
      if(this.pagen<this.num){
        this.pagen++
        this.huoqu.pagenum++
          huoqu(this.huoqu).then(res=>{
          this.sj.users=res.data.data.users
          this.num=Math.ceil(this.sj.total / 2)
        })
      }else{
        this.pagen=1
        this.huoqu.pagenum=1
        huoqu(this.huoqu).then(res=>{
          this.sj.users=res.data.data.users
          this.num=Math.ceil(this.sj.total / 2)
        })
      }
      
    },
    jiann(){
      if(this.pagen>1){
        this.pagen++
        this.huoqu.pagenum--
          huoqu(this.huoqu).then(res=>{
          this.sj.users=res.data.data.users
          this.num=Math.ceil(this.sj.total / 2)
        })
      }else{
        this.pagen=this.num
        this.huoqu.pagenum=this.num
        huoqu(this.huoqu).then(res=>{
          this.sj.users=res.data.data.users
          this.num=Math.ceil(this.sj.total / 2)
        })
      }
    },
    add(){
      this.zh.username=''
      this.zh.password=''
      console.log(this.pd);
      if(this.pd==true){
        this.pd=false
      }else{
        this.pd=true
      }
    },
    qx(){
      if(this.pd==false){
        this.pd=true
      }
    },
    tj(){
      loginRequest(this.zh).then(res=>{
        if(res.data.meta.status==201){
          if(this.pd==false){
            this.pd=true
          }
          this.fb()
        }else if(res.data.meta.status==400){
          alert('用户名已存在')
        }
        
      })
    },
    bj(x,i){
      this.bianji=x
      console.log(this.bianji.id);
      this.dialogFormVisible=true
    },
    bjcg(x){
      bjyhrequest(this.bianji).then(res=>{
        if(res.data.meta.status==200){
          this.dialogFormVisible=false
          this.fb()
        }else{
          alert('编辑失败')
        }
      })
      // this.dialogFormVisible=false
    },
    // 更改角色
    bjcg1(x){
      xgjsrequest(this.bianji).then(res=>{
        console.log(res);
        if(res.data.meta.status==200){
          this.dialogFormVisible1=false
          this.fb()
        }else{
          alert('更改角色失败')
        }
      })
      // this.dialogFormVisible=false
    },
    rid(x,i){
      this.bianji.rid=i
      this.value=x
      console.log(this.bianji.rid);
    },
    shezhi(x){
      this.bianji.id=x.id
      this.dialogFormVisible1=true
      jsqx('list').then(res=>{
            this.jslb= res.data.data
            console.log(this.jslb);
      })
    }
  }
}
</script>

<style scoped>
  .box{
    width: 100%;
    border-collapse:collapse;
  }
  tr{
    height: 40px;
  }
  td{
    border: 1px solid #c0c0c0;
    padding-left: 10px;
  }
  .fy{
    height: 20px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    margin-left: 30px;
    color: #c0c0c0;
  }
  .jian,.jia{
    border:none;
    font-size: 18px;
    background-color: white;
    cursor: pointer;
    color: #c0c0c0;
  }
  .sousuo{
    width: 360px;
    height: 40px;
    border: 1px solid #c0c0c0;
    box-sizing: border-box;
    vertical-align: top;
  }
  .el-icon-search{
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #c0c0c0;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #F5F7FA;
    margin-left: -2px;
    font-size: 20px;
    vertical-align: top;
    cursor: pointer;
  }
  .add{
    width: 180px;
    height: 40px;
    display: inline-block;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: top;
    margin-left: 30px;
    text-align: center;
    line-height: 40px;
    background-color: #1f89f3;
    color:white;
  }
  .tanchuang{
    width: 500px;
    border: 1px solid #000;
    position: absolute;
    top: 100px;
    left:calc(70vw / 2 - 500px / 2);
    height: 300px;
    z-index: 999;
    background-color: white;
    text-align: center;
  }
  .yc{
    display: none;
  }
  .zh,.mm{
        width: 360px;
        height: 30px;
        border: 1px solid rgb(212, 212, 212);
        margin-top: 50px;
    }
    .tj,.qx{
      width: 180px;
      height: 30px;
      border: none;
      margin-top: 50px;
      margin-left: 20px;
    }
    .zhezhao{
      width: 100vw;
      height: 100vh;
      background-color: #000000b4;
      position: absolute;
      top: -130px;
      left: -230px;
      z-index: 998;
    }
    .bianji{
      width: 45px;
      text-align: center;
      height: 25px;
      margin-left: 10px;
      line-height: 25px;
      display: inline-block;
      color:white;
      cursor: pointer;
    }
    .el-icon-edit{
      background-color: #1f89f3;
    }
    .el-icon-delete{
      background-color: red;
    }
    .el-icon-setting{
      background-color: rgb(144, 144, 50);
    }
</style>